<template>
    <div class="box">
        <div v-if="info.list && info.list.length > 0" :style="{
            'padding': `0 ${info.padding / 2}px`
        }">
            <el-carousel :height="`${info.height / 2}px`" :autoplay="true" indicator-position="none" arrow="never">
                <el-carousel-item v-for="(banner, b) in info.list" :key="b">
                    <img :src="$imgUrl + banner.img" alt="" :style="{
            'height': `${info.height / 2}px`,
            'border-radius': `${info.border_radius / 2}px`,
        }" class="img">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div v-else>
            <empty icon="Picture" name="轮播模块" />
        </div>
    </div>
</template>

<script setup name="ViewBanner">
import empty from '../empty.vue'

const props = defineProps({
    info: { required: true },
});





</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    box-sizing: border-box;

    .img {
        width: 100%;
        height: 100%;
    }
}
</style>
